﻿<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>智能聊天</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="../lib/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="../css/public.css" media="all" />
    <style>
      .chatgpt-layout {
        display: flex;
        height: 80vh;
        max-width: 900px;
        margin: 40px auto;
        background: #fafbfc;
        border: 1px solid #eee;
        border-radius: 8px;
        box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.06);
      }
      .chatgpt-sidebar {
        width: 200px;
        background: #f5f6fa;
        border-right: 1px solid #eee;
        border-radius: 8px 0 0 8px;
        padding: 0;
        display: flex;
        flex-direction: column;
      }
      .chatgpt-sidebar-header {
        padding: 18px 16px 10px 16px;
        font-weight: bold;
        color: #555;
        border-bottom: 1px solid #eee;
        font-size: 16px;
        background: #f8f9fa;
        border-radius: 8px 0 0 0;
      }
      .chatgpt-chatlist {
        flex: 1;
        overflow-y: auto;
        padding: 10px 0;
      }
      .chatgpt-chatlist-item {
        padding: 10px 18px;
        cursor: pointer;
        color: #333;
        border-left: 3px solid transparent;
        transition: background 0.2s, border-color 0.2s;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .chatgpt-chatlist-item.active,
      .chatgpt-chatlist-item:hover {
        background: #e6f7ff;
        border-left: 3px solid #5fb878;
        color: #5fb878;
      }
      .chatgpt-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        border-radius: 0 8px 8px 0;
        background: #fafbfc;
      }
      .chatgpt-messages {
        flex: 1;
        padding: 20px;
        overflow-y: auto;
      }
      .chatgpt-message {
        margin-bottom: 18px;
        display: flex;
      }
      .chatgpt-message.user {
        justify-content: flex-end;
      }
      .chatgpt-bubble {
        max-width: 70%;
        padding: 12px 18px;
        border-radius: 18px;
        background: #e6f7ff;
        color: #333;
        word-break: break-all;
        font-size: 15px;
        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.03);
      }
      .chatgpt-message.user .chatgpt-bubble {
        background: #5fb878;
        color: #fff;
      }
      .chatgpt-input-area {
        padding: 16px;
        border-top: 1px solid #eee;
        background: #fff;
        display: flex;
        align-items: flex-end;
      }
      .chatgpt-input-area textarea {
        flex: 1;
        margin-right: 8px;
        resize: none;
        min-height: 38px;
        max-height: 120px;
        border-radius: 8px;
        font-size: 15px;
      }
      .chatgpt-input-area button {
        height: 38px;
        border-radius: 8px;
      }
      .prompt-bar {
        padding: 12px 20px 0 20px;
        border-bottom: 1px solid #f0f0f0;
        background: #f8f9fa;
      }
      .prompt-title {
        font-weight: bold;
        margin-right: 8px;
        color: #666;
      }
      .prompt-item {
        display: inline-block;
        padding: 4px 14px;
        border-radius: 16px;
        background: #f2f3f5;
        color: #333;
        font-size: 14px;
        margin-bottom: 6px;
        margin-right: 8px;
        transition: background 0.2s, color 0.2s;
        border: 1px solid #e0e0e0;
        cursor: pointer;
        user-select: none;
      }
      .prompt-item:hover {
        background: #5fb878;
        color: #fff;
        border-color: #5fb878;
      }
    </style>
  </head>
  <body>
    <div class="chatgpt-layout">
      <!-- 左侧聊天列表 -->
      <div class="chatgpt-sidebar">
        <div class="chatgpt-sidebar-header">会话列表</div>
        <div class="chatgpt-chatlist" id="chatList">
          <div class="chatgpt-chatlist-item active">新的会话</div>
          <div class="chatgpt-chatlist-item">工作总结</div>
          <div class="chatgpt-chatlist-item">代码帮助</div>
          <div class="chatgpt-chatlist-item">翻译助手</div>
        </div>
      </div>
      <!-- 右侧主聊天区 -->
      <div class="chatgpt-container">
        <div class="prompt-bar">
          <span class="prompt-title">下一步可问:</span>
          <span class="prompt-item">写一首诗</span>
          <span class="prompt-item">总结这段文本</span>
          <span class="prompt-item">翻译为英文</span>
          <span class="prompt-item">生成代码示例</span>
        </div>
        <div class="chatgpt-messages" id="chatgptMessages">
          <!-- 聊天消息显示区 -->
        </div>
        <div class="chatgpt-input-area">
          <textarea
            id="chatgptInput"
            class="layui-textarea"
            rows="2"
            placeholder="请输入您的问题..."
          ></textarea>
          <button class="layui-btn layui-btn-normal" id="chatgptSendBtn" style="height:52px;">
            发送
          </button>
        </div>
      </div>
    </div>
    <script src="../lib/layui/layui.js" charset="utf-8"></script>
    <script>
      // 仿ChatGPT前端逻辑
      const chatgptMessages = document.getElementById("chatgptMessages");
      const chatgptInput = document.getElementById("chatgptInput");
      const chatgptSendBtn = document.getElementById("chatgptSendBtn");
      // 提示词点击填充并自动发送
      document.querySelectorAll(".prompt-item").forEach(function (item) {
        item.addEventListener("click", function () {
          chatgptInput.value = this.textContent;
          chatgptInput.focus();
          chatgptSendBtn.onclick();
        });
      });
      // 聊天列表选中效果
      document.querySelectorAll(".chatgpt-chatlist-item").forEach(function (item) {
        item.addEventListener("click", function () {
          document.querySelectorAll(".chatgpt-chatlist-item").forEach(function (el) {
            el.classList.remove("active");
          });
          this.classList.add("active");
          // 这里可扩展：切换会话时加载不同的聊天记录
        });
      });
      function appendMessage(text, isUser) {
        const msgDiv = document.createElement("div");
        msgDiv.className = "chatgpt-message" + (isUser ? " user" : "");
        msgDiv.innerHTML = `<div class="chatgpt-bubble">${text}</div>`;
        chatgptMessages.appendChild(msgDiv);
        chatgptMessages.scrollTop = chatgptMessages.scrollHeight;
      }
      function fakeGptReply(question) {
        // 这里可替换为实际后端接口
        return new Promise((resolve) => {
          setTimeout(() => {
            resolve("这是模拟的ChatGPT回复：" + question);
          }, 1000);
        });
      }
      chatgptSendBtn.onclick = async function () {
        const text = chatgptInput.value.trim();
        if (!text) return;
        appendMessage(text, true);
        chatgptInput.value = "";
        appendMessage('<span style="color:#bbb;">正在思考中...</span>', false);
        const loadingMsg = chatgptMessages.lastChild;
        // 调用后端接口获取回复
        const reply = await fakeGptReply(text);
        loadingMsg.querySelector(".chatgpt-bubble").innerHTML = reply;
      };
      chatgptInput.addEventListener("keydown", function (e) {
        if (e.key === "Enter" && !e.shiftKey) {
          e.preventDefault();
          chatgptSendBtn.onclick();
        }
      });
    </script>
  </body>
</html>